<template>
	<view class="indexBox">
		<view class="indexBox_top">
			<image src="../../static/banner.png" mode=""></image>
		</view>
		<view class="indexBox_bottom">
			<view class="item" v-for="(item,index) in itemList" :key="index" @click="itemClick(item)">
				<view class="imgbox">
					<image :src="item.img"></image>
					<view class="itemName">{{item.name}}</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		nextTick,
		getCurrentInstance
	} from 'vue'
	let {
		proxy
	} = getCurrentInstance();
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	const itemList = reactive([
		{
			img: '../../static/index/fd.png',
			name: '企业用电',
			path: '/pages/details/details',
			id: '0'
		},
		
		{	
			img: '../../static/index/yd.png',
			name: '企业发电',
			path: '/pages/details/details',
			id: '1'

		},
		

		{
			img: '../../static/index/cn.png',
			name: '企业储能',
			path: '/pages/details/details',
			id: '2'
		},
		{
			img: '../../static/index/cdz.png',
			name: '企业充电桩',
			path: '/pages/details/details',
			id: '3'

		}
	])

	const itemClick = (item) => {

		uni.navigateTo({
			url: `${item.path}?item=${encodeURIComponent(JSON.stringify(item))}`
		})
	}


	onMounted(() => {

	})
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>

<style lang="scss">
	.indexBox {
		&_top {
			width: 100%;
			height: 360rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}

		&_bottom {
			padding: 32rpx 44rpx 0 44rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 320rpx;
				height: 420rpx;
				// background: #E0F4EE;
				background-color: #fff;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 22rpx;
				margin-bottom: 22rpx;
				position: relative;


				.imgbox {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					text-align: center;

					image {
						width: 122rpx;
						height: 122rpx
					}

					.itemName {
						margin-top: 36rpx;
						font-size: 32rpx;
						color: #000;
						font-weight: 550;
					}
				}

			}

			.item:nth-child(even) {
				width: 320rpx;
				height: 420rpx;
				// background: #E0F4EE;
				background-color: #fff;
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 0rpx;
				margin-bottom: 22rpx;
			}
		}
	}
</style>